<template>
  <div class="vip-club h-100vh ralative">
    <van-icon
      name="cross"
      class="absolute right-12px top-12px z-11 text-text-6 font-bold"
      @click="$router.go(-1)"
    />
    <div
      class="vip-club__header bg-fog-14 h-85px flex items-center justify-between px-16px relative"
    >
      <span
        class="text-text-3 z-1 text-13px absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2"
        >{{ $t("title") }}</span
      >

      <img
        src="https://bc.game/assets/ribbon.0a768b9e.png"
        class="h-40px absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2"
      />
    </div>
    <div class="vip-club__body bg-fog-9 p-8px">
      <div class="body-title bg-fog-10 p-10px text-10px">
        <p class="m-0 leading-14px text-center">
          {{ $t("desc") }}
          <span class="text-text-5">{{ $t("desc_view") }}</span>
        </p>
      </div>
      <div
        class="body-progress rounded-8px  mt-12px flex gap-16px h-140px px-16px"
      >
        <div class="left relative">
          <img src="@/assets/vip-club/1.png" alt="" class="w-110px" />
          <img
            src="https://bc.game/assets/light.11b6df26.svg"
            class="absolute left-0 top-0"
          />
          <div
            class="absolute left-[50%] top-[50%] -translate-x-1/2 -translate-y-1/2 text-center"
          >
            <div class="mint">{{ $t("Bronze") }}</div>
            <span class="text-text-3 text-11px">
              {{ $t("vip") }}
              <span class="font-bold text-17px">3</span>
            </span>
          </div>
        </div>
        <div class="right text-12px flex-grow">
          <p class="text-text-3 text-13px pt-12px font-600">
            {{ $t("progress") }}
          </p>
          <p class="text-text-3 m-0 mb-6px flex items-center gap-4px">
            57 XP
            <svg class="w-15px h-18px fill-text-10">
              <use
                xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Inform"
              ></use>
            </svg>
          </p>
          <van-progress
            :percentage="50"
            :show-pivot="false"
            stroke-width="10px"
            class="vip-club-progress"
          />
          <p class="text-text-3">743 XP Until VIP 4</p>
        </div>
      </div>
      <div class="body-host pt-6px bg-fog-18 rounded-8px mt-12px">
        <div class="host-title flex justify-between p-r-10px">
          <div class="text-10px leading-18px bg-fog-19 text-text-3 px-4px">
            {{ $t("host") }}
          </div>
          <svg class="w-15px h-18px fill-text-10">
            <use
              xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Inform"
            ></use>
          </svg>
        </div>
        <div class="text-center text-12px pb-20px">
          <div>
            <img src="@/assets/vip-club/2.webp" class="h-34px" />
          </div>
          <div>
            <p>{{ $t("host_desc") }}</p>
            <p>
              {{ $t("host_at") }}
              <span class="font-700 italic  text-text-3"
                >{{ $t("vip") }} 38</span
              >
            </p>
          </div>
        </div>
      </div>
      <div class="body-discover p-12px bg-fog-10 mt-12px">
        <p class="text-center text-12px text-text-4">
          {{ $t("discover_desc") }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const $t = key => {
  console.log("11111");
  return t("vip-club." + key);
};
</script>

<style lang="less" scoped>
.vip-club {
  &__header {
  }
  &__body {
    .body-progress {
      background: var(--fog-15);
      .vip-club-progress {
        background: var(--fog-17);
        :deep(.van-progress__portion) {
          background: var(--fog-16);
        }
      }
    }
  }
  .mint {
    color: var(--text-9);
    background: var(--fog-38);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: var(--shadow-3);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: -0.5px;
    font-weight: 800;
  }
}
</style>
